<template>
  <el-drawer v-model="state.open" destroy-on-close title="考试时间" @close="close" @open="open">
    <template #default>
      <el-tabs style="margin-bottom: 15px;" type="border-card">
        <el-form ref="editForm" :model="data" :rules="rules" label-width="auto">
          <el-tab-pane label="考试信息">
            <el-form-item label="时间" prop="date">
              <el-date-picker v-model="data.date" clearable placeholder="选择考试时间" type="date" value-format="YYYY-MM-DD"/>
            </el-form-item>
          </el-tab-pane>
        </el-form>
      </el-tabs>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="close">取消</el-button>
        <el-popconfirm v-if="state.id" cancel-button-text="否" confirm-button-text="是" title="确定删除该层次?" width="250" @confirm="del">
          <template #reference>
            <el-button type='danger'>删除</el-button>
          </template>
        </el-popconfirm>
        <el-button v-if="state.id" type="warning" @click="upsert">更新</el-button>
        <el-button v-else type="primary" @click="upsert">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script>

export default {
  name: "Create",
  props: ['state'],
  data() {
    return {
      data: {date:''},
      rules: {
        date: [
          {
            required: true, trigger: ['change', 'blur'], validator: (_, value, callback) => {
              if (!value) return callback(new Error('请输入考试日期'))
              callback()
            }
          }
        ]
      }
    }
  },
  methods: {
    async open() {
      if (this.state.id) {
        this.data = await this.post('/basic/exam-date/get', {id: this.state.id})
      }
    },
    async upsert() {
      await this.$refs['editForm'].validate(async (valid, fields) => {
        if (!valid) return
        await this.post('/basic/exam-date/upsert', {
          id: this.state.id,
          basicId: this.state.basicId,
          date: this.data.date,
        });
        this.$emit('updated', {del: false})
        this.close()
      })
    },
    async del() {
      await this.post('/basic/exam-date/delete', {
        id: this.state.id,
      });
      this.$emit('updated', {del: true, id: this.state.id})
      this.close()
    },
    close() {
      this.state.open = false
      this.$refs['editForm'].resetFields()
    },
  }
}
</script>

<style scoped>
:deep(.cm-scroller) {
  min-height: calc(100vh - 520px);
}
</style>